<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./easyui/default/easyui.css">
    <script src="./layui/jquery-3.5.0.min.js"></script>
    <script src="./easyui/jquery.easyui.min.js"
            type="text/javascript"></script>

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test" id="left-menu">
<!--                <li class="layui-nav-item">-->
<!--                    <a href="javascript:;">解决方案</a>-->
<!--                    <dl class="layui-nav-child">-->
<!--                        <dd><a href="javascript:;">列表一</a></dd>-->
<!--                        <dd><a href="javascript:;">列表二</a></dd>-->
<!--                        <dd><a href="">超链接</a></dd>-->
<!--                    </dl>-->
<!--                </li>-->
<!--                <li class="layui-nav-item"><a href="javascript:" onclick="toRight('sys/customer.html')">客户管理</a></li>-->
<!--                <li class="layui-nav-item"><a href="javascript:" onclick="toRight('sys/appinfo.html')">应用管理</a></li>-->
            </ul>
        </div>
    </div>

    <div class="layui-body" id="main">
        <!-- 内容主体区域 -->
<!--        <div style="padding: 15px;">内容主体区域</div>-->
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script src="./layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

        var str = "";
        $.ajax({
            url:"sys/menu/side",
            type:"GET",
            success:function(data){
                //填充
                if(data.state){
                    $.each(data.result,function (index,obj) {
                        str+='<li class="layui-nav-item layui-nav-itemed">';
                        if(obj.type == 1){
                            str+='<a class="" href="javascript:;" onclick="toRight(\''+obj.url+'\')" >'+obj.name+'</a>'
                        }else{
                            str+='<a class="" href="javascript:;">'+obj.name+'</a>'
                        }

                        /*循环出二级菜单*/
                        if(obj.children.length>0){
                            menuTree(obj.children);
                        }

                        str+='</li>';
                    });
                }
                $("#left-menu").html(str);
            }
        })

        function menuTree(menuList) {
            str += '<dl class="layui-nav-child">';
            $.each(menuList,function (index,menu) {
                str+='<dd>';
                if(menu.type == 1){
                    str+='<a class="" href="javascript:;" onclick="toRight(\''+menu.url+'\')" >'+menu.name+'</a>'
                }else{
                    str+='<a class="" href="javascript:;">'+menu.name+'</a>'
                }

                if(menu.children.length>0){
                    menuTree(menu.children)
                }

                str+='</dd>';
            })
            str+='</dl>';
        }

    });

    function toRight(url) {
        $("#main").load(url);
    }

</script>
</body>
</html>